<template>
    <u-sticky>
        <view style="background: #fff;">
            <u-notify message="连接异常" :show="show"></u-notify>
            <view class="blue-state-box" @click="onShowBlueList">
                <!--正在创建连接-->
                <view v-if="connectLoading" class="item-gap flex-start-center">
                    <u-loading-icon size="16"></u-loading-icon>
                    <text style="font-size: 28rpx;margin-left: 8rpx;">正在连接{{selectDeviceItem.name}}</text>
                </view>
                <view v-else>
                    <!--蓝牙未开启-->
                    <view v-if="!blueState" class="flex-start-center">
                        <view class="blue-state close"></view>
                        <text style="font-size: 28rpx;">蓝牙未打开</text>
                    </view>
                    <!--蓝牙已开启-->
                    <view v-else class="flex-start-center">
                        <!--蓝牙连接状态-->
                        <view
                            :class="[
                            'blue-state',
                            isConnected ? 'open' : !selectDeviceItem.name ? 'close' : 'warning'
                        ]"
                        ></view>
                        <text style="font-size: 28rpx;">{{ isConnected ? connectionDevice.name : !selectDeviceItem.name ? '无连接' : selectDeviceItem.name }}</text>
                    </view>
                </view>
            </view>
        </view>
        <jkPopup :show="showPopup" @close="showPopup = false" title="蓝牙列表" :show-confirm="false">
            <view>
                <!--<view style="text-align: center;font-size: 26rpx;margin: 12rpx 0;">注：android用户需开启定位!</view>-->
                <view class="flex-center margin-bottom-20">
                    <view v-if="isConnected" style="padding-right: 10rpx;"><u-button @click="onActiveCloseBlue" style="width: 100%;" size="default" type="error" plain>断开连接</u-button></view>
                    <view v-else-if="!isConnected && selectDeviceItem.deviceId" style="padding-right: 10rpx;"><u-button @click="onSelectDeviceItem(selectDeviceItem)" style="width: 100%;" size="default" type="success" plain>重新连接</u-button></view>
                    <view v-if="!isRun" style="padding-left: 10rpx;"><u-button @click="onJustSearchBlue" style="width: 100%;" size="default" type="primary" plain>开始扫描</u-button></view>
                    <view v-else style="padding-left: 10rpx;"><u-button @click="stopSearchBlue" style="width: 100%;" size="default" type="primary" plain>停止扫描</u-button></view>
                </view>
                <view>
                    <u-loading-icon v-if="isRun" size="18"></u-loading-icon>
                </view>
                <scroll-view class="device-box" :scroll-y="true" :scroll-x="false" :show-scrollbar="false">
                    <view
                        v-for="(item, index) in blueList"
                        :key="index"
                        hover-class="hover-class"
                        class="device-item"
                        @click="onSelectDeviceItem(item)"
                    >
                        <view style="">
                            <view class="color1" style="font-size: 28rpx;">{{ item.name || '无' }}</view>
                            <view class="color3">{{ item.deviceId }}</view>
                        </view>
                        <view class="color3">{{ item.deviceId === connectionDevice.deviceId ? '已连接' : '' }}</view>
                    </view>
                </scroll-view>
            </view>
        </jkPopup>
    </u-sticky>
</template>
<script>
    import blue from "./blue2";
    import jkPopup from '../../../jk-components/jk-popup/index';
    import jkFormCard from "../../../jk-components/jk-from-card";
    let _self;
    export default {
        mixins: [blue],
        components: {
            jkFormCard,
            jkPopup
        },
        data() {
            return {
                showPopup: false
            };
        },
        methods: {
            onShowBlueList() {
                this.showPopup = true;
            }
        },
        mounted() {
            _self = this;
            this.initBlue();
        },
        watch: {
            showPopup(newVal) {
                if (newVal) {
                    this.onJustSearchBlue();
                } else {
                    this.stopSearchBlue();
                }
            }
        }

    }
</script>
<style scoped lang="scss">
    $blue_state_width: 20rpx;
    .device-box {
        height: 700rpx;
        .device-item {
            border-bottom: solid 1px #e8eaec;
            font-size: 24rpx;
            padding: 12rpx 20rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .hover-class {
            background: rgba(238, 234, 234, .8) !important;
            color: #fff;
        }
    }
    .blue-state-box {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 76rpx;
        font-size: 32rpx;
        border-bottom: solid 1rpx #f8f8f9;
        margin-bottom: 20rpx;
        box-shadow: 0 0 2rpx 1rpx #eee;
        .open {
            color: #2d8cf0;
            background: #2d8cf0;
        }
        .close {
            color: red;
            background: red;
        }
        .warning {
            color: #ff9900;
            background: #ff9900;
        }
        .blue-state {
            width: $blue_state_width;
            height: $blue_state_width;
            border-radius: 50%;
            animation: machineAnimation 1.5s infinite linear;
            margin-right: 8rpx;
        }
    }
    @keyframes machineAnimation {
        0%{
            opacity: 1;
        }
        25%{
            opacity: .5;
        }
        50%{
            opacity: .25;
        }
        75%{
            opacity: .5;
        }
        100%{
            opacity: 1;
        }
    }
</style>
